Web Integration Introduction
Connected Payments Web Integration enables you to accept payments on your website. Choose between an embedded iFrame or a hosted payment page, both fully customisable to match your brand.
Quick Start Guide
Choose your integration path based on your requirements:
- Embedded iFrame
- Hosted Redirect
- Digital Wallets
Best for: Seamless checkout flows, single-page applications, custom UX requirements
What You'll Build
Embed a payment form directly on your page using an iFrame. Maintain full control over the user experience while receiving real-time events via PostMessages.
Key Benefits
- Seamless user experience (no redirect)
- Real-time payment status updates
- Full control over page layout
- Custom error handling
Best for: Quick integration, reduced development effort, traditional checkout flows
What You'll Build
Redirect customers to a fully hosted payment page on Connected Payments servers. Customise the page to match your brand and reduce implementation complexity.
Key Benefits
- Fastest implementation
- Minimal code required
- No PostMessage handling needed
Best for: Supporting digital wallets and modern payment methods
What You'll Build
Integrate popular digital wallets and alternative payment methods to provide customers with their preferred payment options.
Available Options
- Apple Pay – iOS, Mac, and Safari payments
- Google Pay – Android and web payments
- Click to Pay – Streamlined card payments
Complete Documentation Index
Core Integration Guides
| Guide | Description | When to Use |
|---|---|---|
| iFrame Integration Guide | Complete implementation guide for both embedded and hosted modes | Start here for any web integration |
| PostMessages Reference | Complete event reference for iFrame communication | Required for embedded integrations |
| Form Submissions Guide | Handle payment submissions, responses, and redirects | Essential for processing payments |
Troubleshooting & Support
| Resource | Description | When to Use |
|---|---|---|
| Troubleshooting Guide | Quick reference for common issues and fixes | When encountering integration problems |
| iFrame FAQs | Frequently asked questions | Quick answers to common questions |
Digital Wallets
| Integration | Description | When to Use |
|---|---|---|
| Apple Pay Integration | Secure payments on iOS, Mac, and Safari | Supporting Apple device users |
| Google Pay Integration | Fast checkout on Android and web | Supporting Android and web wallet users |
| Click to Pay | Streamlined card payments | Simplifying card payment experience |
| Overview | Compare all alternate payment methods | Choosing the right payment method |
Key Features
- Security
- Customisation
- Advanced Features
Secure Communication
- HMAC signature validation for all requests
- HTTPS required for production
- Tokenisation support for recurring payments
Full Brand Control
- Custom CSS styling
- Configurable form fields
- Custom validation messages
- Branded payment pages
- Multiple language support
Flexible Configuration
- Control which fields appear
- Set default values
- Configure validation rules
- Customise button text and colours
Payment Capabilities
- Multiple payment methods (cards and wallets)
- Dynamic surcharging
- 3D Secure 2.0 authentication
- Fraud detection integration
- Least-cost routing
Developer Tools
- Real-time PostMessage events
- Comprehensive error handling
- Sandbox testing environment
- No-code configuration updates
- Webhook notifications
Integration Comparison
| Feature | Embedded (iFrame) | Hosted (redirect) |
|---|---|---|
| User Experience | Seamless (no redirect) | Traditional (redirect) |
| Real-time Events | Yes (PostMessages) | No |
| Custom Layout Control | Full control | Limited |
| PostMessage Handling | Required | Not needed |
| Best For | Modern SPAs, custom UX | Quick integration, traditional flows |